<!DOCTYPE html>
<html th:lang="#{lang}">
<head>
    <title th:text="#{title}"></title>
    <meta name="keywords" th:content="#{keywords}">
    <meta name="description" th:content="#{description}">
    <div th:replace="common/meta"></div>
</head>
<body>

<div th:replace="common/header-home:: header(${lang})"></div>

<div th:replace="common/cate:: cate(${cates})"></div>

<nav class="classification">
    <ul class="flexbox">
        <li class="flex1"></li>
        <li class="flex1 text " href="/" th:text="#{home}">#{home}</li>
        <li class="flex1 text " href="/rank" th:text="#{rank}">#{rank}</li>
        <li class="flex1 text active" href="/cate" th:text="#{cate}">#{cate}</li>
        <li class="flex1"></li>
    </ul>
</nav>
<nav class="type_classification data_classification">
    <ul class="flexbox nav_slider">
        <li class="flex1 text update" th:classappend="${cateId == 0} ? 'active' : ''"><a href="/cate">All</a></li>
        <li class="flex1 text update" th:each="cate:${cates}" th:classappend="${cateId == cate.id} ? 'active' : ''">
            <a th:href="${'/cate/'+cate.id}" th:text="${cate.title}"></a>
        </li>
    </ul>
</nav>
<div class="classification_list">
    <ul>
        <li th:each="r:${list}" class="item">
            <a th:href="${'/comic/'+r.id}">
                <img class="pic" th:src="${r.cover}" th:alt="${r.title}">
                <h3 th:text="${r.title}">title</h3>
                <p class="author" th:text="${r.cate}">cate</p>
                <p class="story_plot ellipsis" th:text="${r.intro}">intro...</p>
                <span class="thumbs_up"><i></i><span th:text="${r.hits}">100</span></span>
            </a>
        </li>
    </ul>
</div>
<div th:replace="common/footer"></div>
</body>
<div th:replace="common/js"></div>
<script src="/static/js/doT.js"></script>
<script type="text/x-dot-template" id="tpl">
    <li class="item">
        <a href="/comic/{{= it.id}}">
            <img class="pic" src="{{= it.cover}}" alt="{{= it.title}}">
            <h3>{{= it.title}}</h3>
            <p class="author">{{= it.cate}}</p>
            <p class="story_plot ellipsis">{{= it.intro}}</p>
            <span class="thumbs_up"><i></i>{{= it.hits}}</span>
        </a>
    </li>
</script>
<script th:inline="javascript">
    var cateId=[[${cateId}]];
</script>
<script type="text/javascript">
    $(window).scroll(function () {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight == scrollHeight) {
            load();
        }
    });
    var page = 1;
    var is_end = is_load = is_load_end = 0;

    function load() {
        if (is_end == 1 || is_load == 1 || is_load_end == 1) {
            return;
        }
        is_load = is_load_end = 1;
        page = page + 1;
        $.post("/api/cate/"+cateId, {page: page}, function (result) {
            if (result.lastPage === false) {
                $.each(result.records, function (index, value) {
                    var tpl = doT.template($("#tpl").html());
                    var html = tpl(value);
                    $(".item:last").after(html);
                });
            } else {
                //$(".cartoon_m2:last").after("<div><h4 style=\"text-align:center;font-size:20px;\">没有更多了!</h4></div>");
                is_end = 1;
            }
        }, "json");
        is_load = 0;
        setTimeout("is_load_end=0", 200);
    }
</script>
</html>